<template>
	<view class="enterCart">
		<view class="search-manage-row">
			<u--input placeholder="搜索购物车商品" class="search-input" v-model="searchKeyword" suffixIcon="search"></u--input>
			<text class="manage-text">管理</text>
		</view>
		<view class="order-list-row">
			<view class="order-item" v-for="(item, index) in filteredOrderList" :key="index">
				<!-- 模板中每个订单项的复选框 -->
				<u-checkbox-group>
					<u-checkbox :value="item.checked" @change="onItemCheckboxChange(item, $event)" shape="circle"
						activeColor="#ff6a4d"></u-checkbox>
				</u-checkbox-group>
				<view class="order-content">
					<image class="product-image" :src="`/static/${item.img}`" mode="aspectFit"></image>
					<view class="product-details">
						<view style="line-height: 45rpx;">
							<text class="product-name">{{item.name}}</text>
							<view class="product-info">
								<text>{{ item.productInformation }}</text>
								<text>商品地址:{{item.address }}</text>
								<text class="product-price">￥{{ item.price}}</text>
							</view>
						</view>
						<view class="quantity-control">
							<text @click="decrementQuantity(item)">-</text>
							<input type="number" v-model="item.quantity" class="quantity-input" disabled />
							<text @click="incrementQuantity(item)">+</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="checkout-row">
			<view class="checkout-info">
				<u-checkbox-group>
					<u-checkbox :checked="selectAll" @change="toggleSelectAll" shape="circle" activeColor="#ff6a4d"
						label="全选"></u-checkbox>
				</u-checkbox-group>
				<text style="font-size: 22rpx;margin-left: 10rpx;">
					已选{{selectedCount}}件，
					<text style="color: coral;font-size: 22rpx;">
						总价：￥
						<text style="font-weight: 550;font-size: 30rpx;">
							{{total}}
						</text>
					</text>
				</text>
			</view>
			<view>
				<button class="checkout-button" @click="checkout">结算</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectAll: false,
				selectedCount: 0,
				totalPrice: 0,
				searchKeyword: '',
				orderList: [{
						checked: false,
						orderNum: '241512',
						img: 'logo.png',
						name: 'logo',
						logistics: '暂无',
						address: '中国',
						productInformation: '商品信息商品信息',
						productStatus: '',
						time: '中午12点',
						quantity: 1,
						price: 19.99,
					},
					{
						checked: false,
						orderNum: '241512',
						img: 'logo.png',
						name: 'qwe',
						logistics: '暂无',
						address: '中国',
						quantity: 1,
						productInformation: '商品信息商品信息',
						productStatus: '',
						time: '中午12点',
						price: 29.99,
					},
					{
						checked: false,
						orderNum: '241512',
						img: 'logo.png',
						name: 'logo',
						quantity: 1,
						logistics: '暂无',
						address: '中国',
						productInformation: '商品信息商品信息',
						productStatus: '',
						time: '中午12点',
						price: 19.99,
					},
				],
			};
		},
		computed: {
			itemTotals() {
				return this.orderList.map(item => {
					return item.price * item.quantity;
				});
			},
			filteredOrderList() {
				return this.orderList.filter(item => {
					return item.name.toLowerCase().includes(this.searchKeyword.toLowerCase());
				});
			},
			selectedCounts() {
				this.selectedCount = this.orderList.filter(item => item.checked).length
				return this.selectedCount;
			},
			total() {
				let total = 0;
				this.orderList.forEach(item => {
					if (item.checked) {
						total += item.price * item.quantity;
					}
				});
				return total.toFixed(2);
			},
		},
		methods: {
			decrementQuantity(item) {
				if (item.quantity > 1) {
					item.quantity--;
				}
			},
			incrementQuantity(item) {
				item.quantity++;
			},
			onItemCheckboxChange(item, event) {
				if (item) {
					item.checked = event.target.checked;
					let allChecked = true;
					this.orderList.forEach(i => {
						if (!i.checked) {
							allChecked = false;
							return false;
						}
					});
					this.selectAll = allChecked;
					this.updateTotals();
				} else {
					console.error('Invalid item received in onItemCheckboxChange.');
				}
			},
			toggleSelectAll() {
				const newSelectAllState = !this.selectAll;
				this.selectAll = newSelectAllState;
				this.orderList.forEach(item => {
					item.checked = newSelectAllState;
				});
				this.updateTotals();
			},
			updateTotals() {
				this.selectedCount = this.orderList.filter(item => item.checked).length;
				this.total = this.orderList.reduce((sum, item) => {
					return item.checked ? sum + item.price * item.quantity : sum;
				}, 0);
			},
			checkout() {
				// 结算逻辑
			},
		},
	};
</script>

<style>
	page {
		background-color: #f9f9f9;
	}

	.enterCart {
		width: 100%;
		margin: auto;
	}

	.search-manage-row {
		width: 90%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
	}

	.order-list-row {
		width: 90%;
		margin: auto;
	}

	.search-input {
		width: 70%;
		flex-grow: 1;
	}

	.manage-text {
		font-size: 32rpx;
		margin-left: 10rpx;
		color: #666;
	}

	.order-item {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #eee;
		border-radius: 30rpx;
		background-color: #fff;
		margin: 20rpx 0;
	}

	.order-content {
		display: flex;
		align-items: center;
	}

	.product-image {
		width: 130rpx;
		height: 130rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	/* #ifdef MP-WEIXIN */
	.product-details {
		width: 406rpx;
		display: flex;
		justify-content: space-between;
	}

	/* #endif */
	/* #ifdef H5 */
	.product-details {
		width: 1027px;
		display: flex;
		justify-content: space-between;
	}

	/* #endif */
	.product-name {
		font-size: 36rpx;
		color: #333;
		font-weight: 550;
		margin-bottom: 20rpx;
	}

	.product-price {
		font-size: 28rpx;
		color: red;
		font-weight: 550;
	}

	.product-info {
		display: flex;
		flex-direction: column;
		font-size: 22rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.quantity-control {
		display: flex;
		align-items: center;
	}

	.quantity-control text {
		width: 55rpx;
		height: 55rpx;
		border: 1px solid #ddd;
		font-size: 28rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 13rpx;
		color: #666;
	}

	.quantity-input {
		width: 55rpx;
		height: 55rpx;
		text-align: center;
		color: #ff6a4d;
		font-size: 28rpx;
	}

	.checkout-row {
		width: 100%;
		position: fixed;
		bottom: 0px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		line-height: 120rpx;
	}

	.checkout-info {
		display: flex;
		margin-left: 15rpx;
	}

	.checkout-button {
		background-color: #ff6a4d;
		color: white;
		width: 180rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-right: 20rpx;
	}
</style>